import React, { ReactElement } from "react";
import styles from "./Test.less";
import classnames from "classnames";
import { connect, ConnectedProps, useSelector } from "react-redux";
import { RootState } from "@/models";
import { Button } from "antd";
const mapStateToProps = ({ count }: RootState) => {
  return {
    num: count.num,
  };
};

const connector = connect(mapStateToProps);
// console.log(typeof connector)
type ModelState = ConnectedProps<typeof connector>;
// interface Props extends ModelState {}
interface Props {}

function Test(props: Props): ReactElement {
  const count = useSelector((state: RootState) => {
    return state.count;
  });
  console.log(count);
  // const add = () => {
  //   // console.log(1);
  //   props.dispatch({
  //     type: `count/setState`,
  //     payload: 1,
  //   });
  // };
  // const asyncAdd = () => {
  //   // console.log(1);
  //   props.dispatch({
  //     type: `count/asyncAdd`,
  //     payload: 5,
  //   });
  // };
  return (
    <div>
      <div
        className={classnames({
          [styles.red]: true,
        })}
      >
        App
      </div>
      <div
        className={classnames({
          red: true,
        })}
      >
        {count?.num}
      </div>
      <div>
        {/* <Button onClick={add}>+1</Button> */}
        {/* <Button onClick={asyncAdd}>异步+1</Button> */}
        <Button type="primary">test</Button>
      </div>
    </div>
  );
}

export default Test;
